/* 门户视图
----------------------------------*/

/** 顶部菜单的高度 */
$headerHeight: 150px;

/** 门户最小宽度、或居中情况下的默认宽度：最小适配 1366*768 的分辨率 */
$boxedWidth: 1300px;

/** 菜单字体大小 */
$menuFontSize1: 16px;
$menuFontSize2: 14px;
$menuFontSize3: 14px; // 13px
$menuFontSizeTitle: 24px;
$menuFontSizeContent: 12px;

/** 布局：居中显示 */
body.o-portal.layout-boxed {
	background: url("portal/boxed-bg.png") repeat fixed;

	> .wrapper {
		max-width: $boxedWidth; // 默认 1250
	}
}

body.is-layout-boxed .o-portal-content section {
	padding-left: 6px;
	padding-right: 6px;
}

/** 顶部菜单 */
body.o-portal #o-top-menu {

	ol, ul {
		list-style: none;
		padding: 0;
	}

	a {
		text-decoration: none;
		cursor: pointer;
	}

	.clearfix:before, .clearfix:after {
		content: "";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	/** 顶部菜单：展开的 3+ 级菜单的高度 */
	$submenuHeight: 510px;

	/* 顶部菜单：2级菜单项模板 */
	@mixin menuItem( $domainColor, $subjectColor, $topicColor) {
		color: #fff;

		/** 展开的 3+ 级菜单背景 */
		> .sub-menu {
			background: $domainColor !important;

			a.menulink:hover, a.titlelink:hover {
				background: $subjectColor
			}
		}

		/** 菜单项左右的色条 */
		> a.menulink {
			border-left: 5px solid $domainColor !important;
		}
		&.o-menu-left > a.menulink {
			border-right: 5px solid $domainColor !important;
		}
	}

	/** 右对齐的菜单（默认是左对齐的） */
	&.right {
		ul.nav.navbar-nav {
			float: right;
		}
	}

	/** 1级菜单链接 */
	ul.nav.navbar-nav > li {
		/** 有2级菜单的链接　*/
		&.dropdown {
			float: left;
			position: relative;
		}
		&.dropdown:focus,
		&.dropdown:hover,
		&.dropdown:active {
			border-radius: 0;
			color: #96ab4f;
			transition-duration: .3s;
		}

		/** 菜单链接　*/
		a.dropdown-toggle {
			font-size: $menuFontSize1;
			cursor: pointer;
			border: none;
			//border-color: transparent;
			//border-right: none;
			//background: none;
			//border-right: 1px solid #dddddd;
		}

		/** 下拉按钮 */
		.caret {
			bottom: 0;
			left: 50%;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #444;
			display: inline-block;
			margin-left: 2px;
			margin-bottom: 2px;
		}
		a.dropdown-toggle:hover .caret,
		&.dropdown.open .caret {
			bottom: 0;
			left: 50%;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #dddddd;
			margin-left: 2px;
		}
	}

	/** 2级菜单皮肤定义　*/
	ul.dropdown-menu {
		li.steelblue {
			@include menuItem(#1c758a, #46a8bf, #4fbad4)
		}
		li.purple {
			@include menuItem(#644172, #7e5f8e, #9a72ac)
		}
		li.darkread {
			@include menuItem(#94424f, #9d4a5a, #c55f73)
		}
		li.maroon {
			@include menuItem(#ad3434, #c13b31, #d24a45)
		}
		li.chocolate {
			@include menuItem(#b77033, #bf7b34, #d1933b)
		}
		li.darkgreen {
			@include menuItem(#437a39, #53893e, #689b51)
		}
		li.teal {
			@include menuItem(#218270, #2c8d7b, #329a86)
		}
		li.default {
			@include menuItem(#dddddd, #dedede, #efefef)
		}
	}

	/** 2级菜单：下拉 */
	ul.dropdown-menu {
		left: 0;
		top: 48px;
		position: absolute;
		text-transform: none;
		box-shadow: none;
		border: 0;
		padding: 3px 0 0;

		a {
			border: 0;
			-webkit-box-sizing: content-box;
			-moz-box-sizing: content-box;
			box-sizing: content-box;
			white-space: normal;
		}

		/** 菜单项 */
		> li {
			position: static;
			border-bottom: 1px solid transparent;
			border-top: 1px solid transparent;

			> a.menulink {
				padding: 9px 13px;
				font-size: $menuFontSize2;
				line-height: 18px;
				width: 210px;
				border-bottom: 0 !important;
				border-top: 0 !important;
				position: relative;
				color: #444;

				/** 菜单项两侧的箭头 */
				.fa-chevron-right,
				.fa-chevron-left {
					color: #aaa;
					font-size: 10px;
					line-height: 36px;
					position: absolute;
					top: 0;
				}
				.fa-chevron-right {
					right: 5px;
				}
				.fa-chevron-left {
					left: 5px;
					display: none;
				}
			}

			/** 分割线 */
			&.divider {
				border-top: solid 1px #dddddd;
				margin: 0;
			}

			/** 当前被选中的菜单项 */
			&.hover-active,
			&.hover-active:hover {
				background-color: #f7f7f7;
				border-color: transparent;

				> a.menulink {
					border-color: #f7f7f7;
					color: #444;
					font-weight: bold;
					text-shadow: none;
				}
			}
			&.hover-active > ul,
			&.hover-active > .sub-menu {
				display: block;
			}

			/** 鼠标悬浮的菜单项 */
			&:hover,
			&:hover > a:hover {
				background-color: #fdfdfd;
				border-color: transparent;
			}
			&:hover > a {
				border-color: #fdfdfd;
				color: #444;
				font-weight: bold;
				text-shadow: none;
			}
		}

		/** 当前菜单项 */
		> li.active > a.menulink {
			font-weight: bold;
		}

		/** 展开的 3+ 级菜单 */
		.sub-menu {
			height: $submenuHeight;
			min-height: 100%;
			line-height: 18px;
			border: 0 #999;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 1px 10px;
			position: absolute;
			top: 2px;
			right: auto;
			bottom: auto;
			left: 236px;
			width: 10000px;
			box-shadow: none;
			padding-top: 15px;
			border-radius: inherit;
			z-index: 1000;
			display: none;

			// 左右边界间隔
			$horizontalPadding: 8px;

			> div {
				width: 550px;
			}

			.submenu-title {
				font-size: $menuFontSizeTitle;
				border-bottom: 1px solid #fff;
				margin-left: $horizontalPadding;
				padding: 17px 0 7px;
				color: #fff;

				a.titlelink {
					margin-left: -5px;
					padding: 0 5px;
					color: #fff;
				}
				a.titlelink:hover {
					background: #46a8bf;
				}
			}

			.subjects-group {
				float: left;
			}

			.subjects-header {
				margin: 15px $horizontalPadding 4px;

				strong {
					color: #fff;
					font-size: $menuFontSize3;
					//opacity: .5;
					text-transform: uppercase;
				}

				a {
					color: inherit;
					&.menulink {
						padding: 2px 0px;
					}
				}
			}

			/** 4级菜单，默认3列显示　*/
			ul.col3 {
				li {
					clear: none;
					float: left;
					width: 32%;
				}
				li:nth-child(3n+1) {
					clear: both;
				}
			}

			/** 4级菜单：两列显示 --- col="2" */
			ul.col2 {
				li {
					clear: none;
					float: left;
					width: 48.93%
				}
				li:nth-child(2n+1) {
					clear: both;
				}
			}

			/** link[content] @ sitemap */
			li a p {
				font-size: $menuFontSizeContent;
				margin-top: 10px;
				opacity: .9;
			}

			.menulink,
			.menulink:link,
			.menulink:visited {
				color: #fff;
				font-size: $menuFontSize3;
				line-height: 1.3;
				width: auto;
				display: block;
				padding: 5px $horizontalPadding;
			}
		}

	}

	/** 菜单背景容器：高度和 .sub-menu 一致 */
	.menu-background-container {
		background: #fff;
		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
		height: $submenuHeight;
		min-width: 1000px;
		position: absolute;
		left: 0;
		right: 0;
		margin-left: -300px;
	}

}

/* 顶部菜单：direction="left" */
body.o-portal #o-top-menu .o-menu-left {

	/** 2级菜单：下拉 */
	ul.dropdown-menu {
		right: 0;
		left: auto;

		/** 菜单项 */
		> li > a.menulink {
			border-left: none !important;
			text-align: right;

			.fa-chevron-right {
				display: none;
			}
			.fa-chevron-left {
				display: block;
			}
		}

		/** 展开的 3+ 级菜单 */
		.sub-menu {
			right: 241px;
			left: auto;

			> div {
				float: right;
			}

			.submenu-title, .subjects-header {
				text-align: right;
			}

			.subjects-group {
				float: right;
			}

			ul li {
				float: right;
				text-align: right;
				margin-right: 0;
			}
		}
	}

}

/** 门户框架　*/
body.o-portal {
	/** 最小宽度 */
	min-width: $boxedWidth; // 如果分辨率过低，可以在 app 里设置为 1000px 或者设置 overflow 为 auto，但不推荐

	/** 顶部固定，左侧导航、右侧内容体可滚动 */
	&.fixed {
		.content-wrapper {
			padding-top: $headerHeight;
		}
		/** 居中情况下 */
		&.layout-boxed {
			/** 顶部header */
			.main-header {
				min-width: $boxedWidth;
				left: auto;
				right: auto;
			}
			/** 左侧导航 */
			.main-sidebar {
				left: auto;
			}
		}
	}

	/** 有顶部菜单时　*/
	&.has-topmenu {
		/** 侧边导航的搜索表单*/
		.sidebar-form {
			margin-top: 20px;
		}
	}

	/** 没有顶部菜单时　*/
	&.no-topmenu {
		/** LOGO 头　*/
		.main-header {
			min-height: 100px;
		}
		/** 左侧导航 */
		.main-sidebar {
			padding-top: 100px;
		}
		/** 用户面板 @_sidebar.gsp */
		.main-sidebar .user-panel {
			.toggle {
				display: none;

				a.sidebar-toggle {
					font-family: fontAwesome;
					padding-right: 8px;
				}
				a.sidebar-toggle:before {
					content: "\f0c9";
				}
			}
		}
		&.sidebar-collapse .main-sidebar .user-panel {
			.image, .info {
				display: none;
			}
			.toggle {
				display: block;
			}
		}
	}

	/** 没有左部导航时 */
	&.no-sidebar {
		.main-sidebar,
		.sidebar-toggle {
			display: none;
		}
		.content-wrapper, .main-footer {
			margin-left: 0;
		}
	}

	/** LOGO 头　*/
	.main-header {
		min-height: $headerHeight;

		nav.navbar {
			min-height: 100px;
			margin-left: 0 !important;
			border-bottom: 1px solid ghostwhite;

			/** logo图、及其后面的应用名　*/
			.navbar-logo {
				float: left;
				line-height: 100px;
				margin-left: 30px;
			}
			.navbar-logo-app {
				float: left;
				line-height: 100px;
				color: white;
				font-size: 30px;
				margin-left: 30px;

				a {
					text-decoration: none;
					color: white;
				}
			}

			/** 右上角的图标菜单　*/
			.navbar-custom-menu {
				margin-top: 25px;
				margin-right: 18px;
			}
		}

	}

	/** 左侧导航 */
	.main-sidebar {
		padding-top: $headerHeight;

		.sidebar-menu li.header {
			padding-top: 8px; // AdminLTE.css 中默认 10px
			padding-bottom: 8px;
		}
		.sidebar-menu > li > a,
		.sidebar-menu > section > li > a {
			padding-top: 10px; // AdminLTE.css 中默认 12px
			padding-bottom: 10px;
		}
		.sidebar-menu .treeview-menu {
			// AdminLTE 默认为 5px
			padding-left: 10px;
			// AdminLTE 默认为 600
			> li.active > a {
				font-weight: normal;
			}
		}
	}

	/** 顶部导航（含顶部菜单） */
	#o-top-nav {
		width: 100%;
		min-height: 50px;
		border-bottom: 1px solid white;

		/** 1级菜单的链接 */
		#o-top-menu ul.nav.navbar-nav > li {
			margin-right: 25px;

			&:nth-last-of-type(1) {
				margin-right: 0;
			}

			.caret {
				border-top-color: #dddddd;
			}
		}

		/** 3+级菜单 */
		#o-top-menu .sub-menu {
			top: 0px;
		}
	}
}

/** 门户内容@iframe　*/
.o-portal-homepage {
	&, .o-portal-content-wrapper {
		// 同 AdminLTE
		background-color: #ecf0f5;
	}
	.o-portal-content {
		padding-bottom: 0;
	}
}

.o-portal-content-wrapper {
	margin-left: 0px;
}

.o-portal-content {
	padding-left: 20px;
	padding-right: 20px;

	/** 行　*/
	div.row {
	}

	/** 列　*/
	section {
		padding-left: 10px;
		padding-right: 10px;
	}
	/** 3列布局：3+6+3 */
	/*&.o-portal-content-col3 {
		section.col-lg-3 {
			min-width: 270px;
		}
		section.col-lg-6 {
			min-width: 540px;
		}
	}*/

	/** Portlet　*/
	.o-portlet {

		/** 基于 swiper 的轮播图（carousel） */
		.swiper-pagination-bullet {
			width: 12px;
			height: 12px;
			background: #fff;
			opacity: .8;
		}
		.swiper-pagination-bullet-active {
			background: #434343;
		}
		.swiper-slide a img {
			width: 100%
		}

		/** 链接颜色 */
		a {
			color: #000000;
		}

		/** 标题栏　*/
		.box-header {
			border-bottom: 1px solid #f4f4f4;

			> .fa, > .glyphicon, > .ion, .box-title {
				font-size: 12px;
				font-weight: 800;
			}

			.box-title {
				padding-left: 2px;
			}

			.more {
				float: right;
				padding-top: 8px;
				font-size: 13px;
			}

			.btn:active:focus {
				outline: none;
			}
		}

		/** 内容 */
		.box-body {
			padding: 0;
		}

		/** 搜索栏组件：
			<div class="has-feedback">
				<input type="text" class="form-control input-md" placeholder="通讯录...">
				<span class="glyphicon glyphicon-search form-control-feedback"></span>
			</div>
		 */
		&.o-portlet-search .box-body {
			height: 70px;
			line-height: 70px;

			.has-feedback {
				margin: 20px auto auto 20px;
				width: 85%;

				span.glyphicon-search {
					float: left;
					margin-left: 20px;
					pointer-events: auto;
				}

			}
		}

		/** 进度条组件：
			<h6>北京联通MBS升级 2016 <span>40%</span></h6>
			<div class="progress progress-sm">
				<div class="progress-bar progress-bar-green" role="progressbar"
				 		aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
					<span class="sr-only">40% Complete (success)</span>
				</div>
			</div>
		 */
		&.o-portlet-progress .box-body {
			> .progress {
				margin: 10px;
			}
			> h6 {
				padding: 5px 10px 0px;
				border-top: 1px solid #f4f4f4;
			}
			> h6 > span {
				float: right;
			}
			> h6:first-child {
				border-top: none;
			}
		}

		/** 页签组件：
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Tab 1</a></li>
					<li>...</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab_1">...</div>
				</div>
			</div>
		 */
		&.o-portlet-tabs {
			border-top: 0;
			.nav-tabs-custom > ul > li a {
				border-top: 0;
			}
			.nav-tabs-custom {
				margin-bottom: 0;
			}
		}

		/** 快速导航组件：
			<ul>
				<li><a>
					<div class="icon"><asset:image src="portal/fastnav/hetong.png"></asset:image></div>
					<div class="text">合同管理</div>
				</a></li>
			</ul>
		 */
		&.o-portlet-fastnav .box-body {
			margin-top: 10px;

			ul {
				list-style: none;
				align: center;
				float: left;
				overflow: hidden;
				border: 0px;
				width: 100%;
				height: 100%;
				padding: 0;
			}
			ul li {
				width: 33%;
				float: left;
				text-align: center;
			}
			ul li a {
				min-width: 100%;
				min-height: 80px;
				display: block;
			}
			ul li a div.icon {
				background: lightseagreen;
				height: 60px;
				border-radius: 50px;
				width: 60px;
				margin: 0 auto 15px;
			}
			ul li a div.icon img {
				margin-top: 12px;
			}
			ul li a div.text {
				//
			}
		}

		/** 列表组件：
			- 结构1，基于 table，适合 2 列以上的数据，略；
			- 结构2，基于 ul，适合 1～2 列的数据：
				<ul>
					<li><a>
						<asset:image src="portal/triangle.png" />
						<span>2015-10-27</span>
						<span>年电力行业节能环保论能环保论能环保论能环保论</span>
						<span>质量安全</span>
					</a></li>
				</ul>
				图标示例1：
					<asset:image src="portal/triangle.png" />
					<span>费用预算</span>
					<span class="icon new">新</span>
				图标示例2：
					<asset:image src="portal/triangle.png" />
					<span>2015-10-27</span>
					<span>年电力行业节能环保论能环保论能环保论能环保论</span>
					<span class="right icon new">新</span>
					<span class="right">质量安全</span>
		　*/
		&.o-portlet-list .box-body {

			$paddingLR: 10px;
			$paddingTB: 9px;

			// ul、li 模式的列表：适合 1～2 列的数据
			// 结构：ul -> li -> [a] -> [image], span, ...
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				overflow: auto;

				li {
					border-left: none;
					background: white;
					border-bottom: 1px solid #f4f4f4;
					padding: $paddingTB $paddingLR;
					white-space: nowrap;
					// 文字超出部分自动替换成省略号
					text-overflow: ellipsis;
					overflow-x: hidden;

					span.right {
						float: right;
					}

					// 第一列
					span:nth-of-type(1) {
						margin-left: 2px;
						float: none;
					}
					// 第二+列
					span:not(:nth-of-type(1)):not(.icon) {
						margin-left: $paddingLR;
					}

					// 大于二列的最后一列：靠右对齐。其实除非最后一列数据是一样长、或者是货币金额，否则显示并不好看
					a.right-last {
						width: 100%;
						display: block;
						position: relative;

						span:nth-last-of-type(1):not(:nth-of-type(1)):not(:nth-of-type(2)):not(.icon) {
							position: absolute;
							right: 0px;
							float: none;
						}
					}
					/* 火狐下有问题
					span:nth-last-of-type(1):not(:nth-of-type(1)):not(:nth-of-type(2)):not(.icon) {
						float: right;
					}*/
				}
			}

			// 表格模式的列表：适合大于2列的数据
			table {
				width: 100%;
				margin: 0;
				padding: 0;
				border: none;
				background: white;

				// 单元格定宽 + 文字超出部分自动替换成省略号
				table-layout: fixed;
				th, td {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				// 边距
				tr {
					border-bottom: 1px solid #f4f4f4;
					td {
						padding-top: $paddingTB;
						padding-bottom: $paddingTB;
					}
					td:first-child {
						padding-left: $paddingLR;
					}
					td:not(:nth-child(1)) {
						padding-left: $paddingLR;
					}
					td:last-child {
						padding-right: $paddingLR;
					}
				}

			}

			/* 图标 */
			span.icon {
				position: relative;
				padding: 2px;
				top: -5px;
				margin-left: 5px;

				&:after {
					display: block;
					position: absolute;
					width: 4px;
					height: 4px;
					-webkit-transform: rotate(45deg);
					bottom: -2px;
					left: 7px;
					-moz-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					content: ""
				}

				/** 新：红色 */
				&.new {
					background: red;
					color: white;
				}
				&.new:after {
					background-color: red;
				}
			}
		}
	}
}